<template>
  <div class="menus asideBottom">
    <ul v-if="userRole.id == 'manager' || userRole.id == 'engineer'">
      <li v-for="item in mockNavMenu" @click="pickerMenu(item)" :class="activeMenuIndex == item.index?'activeMenu':''">
        {{item.name}}
      </li>
    </ul>
    <div v-if="userRole.id == 'operator'">
      <el-menu class="el-menu-vertical-demo"
               unique-opened mode="vertical"
               collapse-transition
               collapse
               menu-trigger="hover"
               background-color="#43556E"
               text-color="#fff"
               active-text-color="#fafafa"
               @close="handleClose"
               router>
        <el-submenu index="item.url" v-for="(item,index) in operatorNavMenu" :key="index" style="height: 44px" popper-append-to-body>
          <template slot="title">
            <div>{{item.name}}</div>
          </template>
            <el-menu-item
                    popper-class="mySubMenu"
                    :index="'/home/index?product='+item.id+'&device='+ite.deviceId"
                    v-for="(ite,index) in item.children" :key="index">
              {{ite.name}}
            </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserRole } from "../../common";
import { getRecipeListApi } from "../../api/workStation/mainControl";

export default {
  name: "VonNavMenu",
  data() {
    return {
      activeMenuIndex: 1,
      isCollapse: false, // 是否最小化
      von_currentMenu: {},
      userRole: "",
      operatorNavMenu: [
        {
          name: "",
          index: 1,
          url: "/home/index",
          children: []
        }
      ]
    };
  },
  props: {
    mockNavMenu: {
      type: Array
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      menuList: state => state.menus.list,
      currentMenu: state => state.menus.currentMenu
    })
  },
  mounted() {
    getRecipeListApi().then(res => {
      this.operatorNavMenu = [];
      for (let i = 0; i < res.data.length; i++) {
        const item = res.data[i];
        item.recipeDetails.map(i => (i.name = i.workStationName));
        this.operatorNavMenu.push({
          id: item.id,
          name: item.name,
          index: i + 1,
          url: "/home/index",
          children: item.recipeDetails.sort(
            (a, b) => a.workStationIndex - b.workStationIndex
          )
        });
      }
    });
  },
  methods: {
    pickerMenu(item) {
      this.von_currentMenu = item;
      this.$emit("getSelectTitle", item);
      this.activeMenuIndex = item.index;
      this.$router.push(item.url);
    },
    menuClick(menu) {
      if (menu.code == this.currentMenu.code) return;
      this.$store.dispatch("setCurrentMenu", menu);
    },
    selectWorkStation(item, ite) {
      this.$router.push(item.url, {
        product: item.id,
        workstation: ite.workStationId
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.$emit("getSelectTitle", this.mockNavMenu[0]);
    this.$router.push(this.mockNavMenu[0].url);
    this.userRole = getUserRole();
  }
};
</script>

<style  lang="scss">
@import "../../style/various.scss";
/deep/.menus >>> .el-menu-item.is-active {
  border-left: 2px solid #1a95ff;
  background: $ThemeColor3;
}
/deep/.menus >>> .el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #1acc8f !important;
}
.menus .el-menu-item-group__title {
  padding: 0;
}
.asideBottom {
  position: relative;
  .subTitle {
    position: absolute;
    right: 0px;
  }
  ul {
    li {
      color: white;
      width: 180px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    .activeMenu {
      background: #336cb5;
    }
  }
}
.mySubMenu{
  background: #84B7F8!important;
}
</style>
